<
コンテンツ
説明 バグレポート

アセットと画像の追加

コンテンツ

Flutter アプリにはコードとコードの両方を含めることができます。資産(リソースと呼ばれることもあります)。アセットはファイルです アプリにバンドルされてデプロイされているもの、 実行時にアクセス可能です。一般的な資産の種類には次のものがあります。 静的データ (JSON ファイルなど)、 設定ファイル、アイコン、画像 (JPEG、WebP、GIF、アニメーション WebP/GIF、PNG、BMP、および WBMP)。

アセットの指定

flutterはpubspec.yamlファイル、 プロジェクトのルートにあり、 アプリに必要なアセットを特定するため。

以下に例を示します。

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

ディレクトリの下にあるすべてのアセットを含めるには、 でディレクトリ名を指定します/最後の文字:

flutter:
  assets:
    - directory/
    - directory/subdirectory/

アセットのバンドル化

のassetsのサブセクションflutterセクション アプリに含めるファイルを指定します。 各アセットは明示的なパスによって識別されます (相対的にpubspec.yamlファイル）アセットの場所 ファイルが見つかりました。アセットの順序 宣言されたことは関係ありません。実際に使用されるディレクトリ名 (assets最初の例では、またはdirectory上記の中で 例）関係ありません。

ビルド中、Flutter はアセットを特別な場所に配置します。 と呼ばれるアーカイブアセットバンドルアプリが読むこと 実行時から。

アセットのロード

アプリは、AssetBundle物体。

アセット バンドルの 2 つの主な方法により、 文字列/テキストアセット (loadString()) または画像/バイナリ アセット (load()) 論理キーを指定してバンドルから取り出す。論理キーはパスにマップされます で指定された資産にpubspec.yamlビルド時にファイルを作成します。

テキストアセットの読み込み

各 Flutter アプリには、rootBundleオブジェクトを使用して、メインのアセット バンドルに簡単にアクセスできます。 を使用してアセットを直接ロードすることができます。rootBundleグローバル静的からpackage:flutter/services.dart。

ただし、取得することをお勧めします。AssetBundle現在のためにBuildContextを使用してDefaultAssetBundle、デフォルトではなく アプリで構築されたアセットバンドル。これ このアプローチにより、親ウィジェットが 違うAssetBundle実行時に、 ローカリゼーションやテストに役立ちます シナリオ。

通常、使用するのはDefaultAssetBundle.of()JSON ファイルなどのアセットを間接的にロードするには、 アプリのランタイムからrootBundle。

外側Widgetコンテキスト、またはハンドルの場合 にAssetBundle利用できません、 使用できますrootBundleそのようなアセットを直接ロードします。 例えば：

import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}

画像の読み込み中

画像をロードするには、AssetImageウィジェットのクラスbuild()方法。

たとえば、アプリはバックグラウンドを読み込むことができます 前の例のアセット宣言のイメージ:

return const Image(image: AssetImage('assets/background.png'));

解像度を意識した画像アセット

Flutter は、解像度に適した画像をロードできます。 現在デバイスのピクセル比。

AssetImage要求された論理をマッピングします 現在のアセットに最もよく一致するものにアセットを追加しますデバイスのピクセル比。

このマッピングが機能するには、アセットを配置する必要があります 特定のディレクトリ構造に従って:

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc.

どこMとNは対応する数値識別子です 含まれる画像の公称解像度に合わせます。 言い換えれば、デバイスのピクセル比を指定します。 画像は目的のものです。

この例では、image.pngと考えられています主な資産、 その間Mx/image.pngとNx/image.pngと考えられていますバリエーション。

メインアセットは解像度 1.0 に対応すると想定されます。 たとえば、次のようなアセット レイアウトを考えてみましょう。 名前付きの画像my_icon.png:

.../my_icon.png       (mdpi baseline)
.../1.5x/my_icon.png  (hdpi)
.../2.0x/my_icon.png  (xhdpi)
.../3.0x/my_icon.png  (xxhdpi)
.../4.0x/my_icon.png  (xxxhdpi)

デバイスのピクセル比が 1.8 のデバイスでは、アセット.../2.0x/my_icon.pngが選ばれます。 デバイスのピクセル比が 2.7 の場合、アセットは.../3.0x/my_icon.pngが選ばれます。

レンダリング画像の幅と高さが指定されていない場合 でImageウィジェット、公称解像度がスケールに使用されます アセットが同じ量の画面スペースを占めるようにする メインのアセットと同様に、解像度が高くなるだけです。 つまり、もし.../my_icon.pngが 72 ピクセル x 72 ピクセルの場合、.../3.0x/my_icon.png216ピクセル×216ピクセルである必要があります。 ただし、どちらも 72 ピクセル x 72 ピクセル (論理ピクセル単位) でレンダリングされます。 幅と高さが指定されていない場合。

解像度を意識した画像アセットのバンドル

メインアセットまたはその親ディレクトリを指定するだけで済みます。 の中にassetsのセクションpubspec.yaml。 Flutter はバリアントをバンドルします。 各エントリは、次の例外を除いて、実際のファイルに対応している必要があります。 メインの資産エントリ。メインのアセットエントリが対応していない場合 実際のファイルに変換し、次に解像度が最も低いアセットに変換します。 デバイス ピクセルを備えたデバイスのフォールバックとして使用されます その解像度を下回る比率。エントリはまだ に含まれるpubspec.yamlただし、マニフェスト。

デフォルトのアセットバンドルを使用するものはすべて解像度を継承します 画像をロードするときの意識。 (下位のものを使用する場合は、 レベルクラスなどImageStreamまたImageCache、 スケールに関連するパラメーターにも注目してください)。

パッケージの依存関係内のアセットイメージ

画像をロードするにはパッケージ依存、 のpackage引数を指定する必要がありますAssetImage。

たとえば、アプリケーションがパッケージに依存しているとします。 呼ばれたmy_icons、次のディレクトリ構造を持っています。

.../pubspec.yaml
.../icons/heart.png
.../icons/1.5x/heart.png
.../icons/2.0x/heart.png
...etc.

画像をロードするには、次を使用します。

return const AssetImage('icons/heart.png', package: 'my_icons');

パッケージ自体で使用されるアセットも取得する必要があります を使用してpackage上記のような議論。

パッケージ資産のバンドル

目的のアセットが指定されている場合、pubspec.yamlパッケージのファイルに含めると、自動的にバンドルされます。 応用。特に、パッケージで使用されるアセット それ自体をその中で指定する必要がありますpubspec.yaml。

パッケージは、その中にアセットを含めることも選択できます。lib/に指定されていないフォルダーpubspec.yamlファイル。 この場合、同梱する画像は、 アプリケーションは、どれをそのアプリケーションに含めるかを指定する必要があります。pubspec.yaml。たとえば、次のような名前のパッケージfancy_backgrounds次のファイルが含まれる可能性があります。

.../lib/backgrounds/background1.png
.../lib/backgrounds/background2.png
.../lib/backgrounds/background3.png

たとえば最初の画像を含めるには、pubspec.yamlの アプリケーションはそれをassetsセクション：

flutter:
  assets:
    - packages/fancy_backgrounds/backgrounds/background1.png

のlib/暗示されている、 そのため、アセット パスには含めないでください。

パッケージを開発している場合、パッケージ内にアセットをロードするには、パッケージの「pubspec.yaml」でそれを指定します。

flutter:
  assets:
    - assets/images/

パッケージ内にイメージをロードするには、次を使用します。

return const AssetImage('packages/fancy_backgrounds/backgrounds/background1.png');

基盤となるプラットフォームとアセットを共有する

Flutter アセットはプラットフォーム コードですぐに利用できます を使用してAssetManagerAndroid とNSBundleiOS上で。

Android での Flutter アセットの読み込み

Android では、アセットは次の方法で利用できます。AssetManagerAPI。で使用される検索キー、 例えばopenFd、から得られますlookupKeyForAssetの上PluginRegistry.RegistrarまたgetLookupKeyForAssetの上FlutterView。PluginRegistry.Registrarプラグインの開発時に使用できます その間FlutterViewを開発するときの選択肢になるでしょう プラットフォームビューを含むアプリ。

例として、次のように指定したとします。 pubspec.yaml 内

flutter:
  assets:
    - icons/heart.png

これは、Flutter アプリの次の構造を反映しています。

.../pubspec.yaml
.../icons/heart.png
...etc.

アクセスするためにicons/heart.pngJava プラグイン コードから、 以下をせよ：

AssetManager assetManager = registrar.context().getAssets();
String key = registrar.lookupKeyForAsset("icons/heart.png");
AssetFileDescriptor fd = assetManager.openFd(key);

iOS での Flutter アセットのロード

iOS では、アセットは次の方法で利用できます。mainBundle。 たとえば、次のような場合に使用される検索キーpathForResource:ofType:、 から得られますlookupKeyForAssetまたlookupKeyForAsset:fromPackage:の上FlutterPluginRegistrar、 またlookupKeyForAsset:またlookupKeyForAsset:fromPackage:の上FlutterViewController。FlutterPluginRegistrar開発時に利用可能です プラグインをしながらFlutterViewControllerそれが選択だろう プラットフォーム ビューを含むアプリを開発する場合。

例として、上記の Flutter 設定があるとします。

アクセスするためにicons/heart.pngObjective-C プラグイン コードから、 次のことを行います:

NSString* key = [registrar lookupKeyForAsset:@"icons/heart.png"];
NSString* path = [[NSBundle mainBundle] pathForResource:key ofType:nil];

アクセスするためにicons/heart.pngSwift アプリから、 次のことを行います:

let key = controller.lookupKey(forAsset: "icons/heart.png")
let mainBundle = Bundle.main
let path = mainBundle.path(forResource: key, ofType: nil)

より完全な例については、の実装を参照してください。 fluttervideo_playerプラグインpub.dev で。

のios_platform_imagespub.dev のプラグインがラップする このロジックを便利なカテゴリに追加します。あなたは取ってきます 次のようなイメージです。

目標-C:

[UIImage flutterImageWithName:@"icons/heart.png"];

迅速：

UIImage.flutterImageNamed("icons/heart.png")

Flutter で iOS イメージをロードする

Flutterを実装する場合既存の iOS アプリに追加する、 iOS でホストされている画像がある可能性があります。 Flutterで使いたい。達成するために それを使用してくださいios_platform_imagesプラグイン pub.dev で入手可能です。

プラットフォーム資産

のアセットを扱う機会は他にもあります。 プラットフォームプロジェクトを直接実行します。以下によくある 2 つのケースを示します Flutter フレームワークが使用される前にアセットが使用される場所 ロードされて実行中です。

アプリアイコンの更新

Flutter アプリケーションの起動アイコンの更新が機能する ネイティブで起動アイコンを更新するのと同じ方法 Android または iOS アプリケーション。

Launch icon

アンドロイド

Flutter プロジェクトのルート ディレクトリで、次の場所に移動します。.../android/app/src/main/res。さまざまなビットマップリソース などのフォルダーmipmap-hdpiすでにプレースホルダーが含まれています 名前付きの画像ic_launcher.png。それらをあなたのものに置き換えてください 推奨されるアイコン サイズを考慮した必要なアセット で示される画面密度Android 開発者ガイド。

Android icon location

iOS

Flutter プロジェクトのルート ディレクトリで、 案内する.../ios/Runner。のAssets.xcassets/AppIcon.appiconsetディレクトリにはすでに含まれています プレースホルダー画像。それらを適切なものに置き換えてください ファイル名で示されるサイズの画像。 りんごヒューマンインターフェースガイドライン。 元のファイル名を保持します。

iOS icon location

起動画面の更新

Launch screen

Flutter はネイティブ プラットフォーム メカニズムも使用して描画します Flutter アプリへの移行起動画面 Flutter フレームワークがロードされます。この起動画面は次の期間まで表示されます。 Flutter はアプリケーションの最初のフレームをレンダリングします。

アンドロイド

起動画面 (「スプラッシュ画面」とも呼ばれます) を Flutter アプリケーション、に移動します.../android/app/src/main。 のres/drawable/launch_background.xml、 これを使って描画可能なレイヤーリストカスタマイズするXML 起動画面の外観。既存のテンプレートが提供するのは、 白いスプラッシュの中央に画像を追加する例 コメント化されたコードの画面。コメントを解除することも、他のものを使用することもできますドローアブル意図した効果を達成するために。

詳細については、を参照してください。Android アプリにスプラッシュ画面を追加する。

iOS

「スプラッシュ スクリーン」の中央に画像を追加するには、 案内する.../ios/Runner。 のAssets.xcassets/LaunchImage.imageset、 という名前の画像をドロップしますLaunchImage.png、LaunchImage@2x.png、LaunchImage@3x.png。 別のファイル名を使用する場合は、 を更新するContents.json同じディレクトリ内のファイル。

起動画面のストーリーボードを完全にカスタマイズすることもできます Xcodeで開くと.../ios/Runner.xcworkspace。 案内するRunner/Runnerプロジェクトナビゲータで、 開いて画像をドロップインするAssets.xcassetsまたは何かをする Interface Builder を使用したカスタマイズLaunchScreen.storyboard。

Adding launch icons in Xcode

詳細については、を参照してください。iOS アプリにスプラッシュ画面を追加する。